<template>
  <div class="page_container">
    <div class="page_h">信用卡在线申请</div>
    <div class="page_steps">
      <el-steps :active="active" finish-status="finish">
        <el-step v-for="(item, index) in steps" :key="index">
          <template slot="title">
            <span>{{ item }}</span>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="page_content">
      <img src="../images/selectedCard.jpg" alt class="imgCont" />
      <div class="img_text">实物卡面以实际核发卡面为准</div>
      <div class="result">
        <img src="../images/success.png" alt style="width:50px;" />交易成功
      </div>
      <!-- <div class="r1">这段算是文字描述</div>
      <div class="r2">制作卡面需要一周，5个工作日内送达</div>-->
      <div class="buttonDiv">
        <el-button type="plain" @click="back()" class="btn-back"
          >返回</el-button
        >
        <el-button type="primary" class="btn-apply" @click="finish()"
          >完成</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      steps: ["基本信息", "详细信息", "其他信息", "预览并完成"],
      active: 4,
      checked: false
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    finish() {
      window.sa.track("$CollecCreditEndClick", {
        $element_content: this.$route.params.id
      });
      this.$router.push({ name: "CreditDisplay", params: { isHeader: false } });
    }
  },
  created() {
    window.sa.track("$pageview", {
      $url_path: "orderCardRes"
    });
  }
};
</script>
<style scoped>
.el-button:focus,
.el-button:hover {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.el-button--primary {
  background-color: #06469e;
  border-color: #06469e;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background-color: #06469e;
  border-color: #06469e;
  color: #fff;
}
.page_container {
  margin: 5px 10px;
  width: 100%;
}
.page_h {
  font-size: 20px;
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 10px;
  color: #06469e;
  position: relative;
  line-height: 35px;
  border-bottom: 2px solid #06469e;
  margin-bottom: 10px;
}

.page_h::after {
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  border-left: 2px solid #06469e;
  position: absolute;
  top: 8px;
  left: 0;
}
.order_header {
  width: 100%;
  height: 200px;
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  text-align: center;
}

.order_header .t1 {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
}
.order_header .t2 {
  font-size: 14px;
}
.order_header .t3 {
  color: #6680cc;
  font-size: 12px;
}

.order_header .activity img {
  height: 140px;
}

.page_steps {
  border: 1px solid #dedede;
  border-radius: 5px;
  text-align: left;
  padding: 10px 50px;
}
.order_content {
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.order_content .order_info {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.order_form {
  width: 600px;
}
.order_form .order_title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 48px;
}
.order_agree {
  text-align: left;
}
.order_agree a {
  color: #06469e;
}
.buttonDiv {
  line-height: 60px;
  text-align: center;
}
.agreeOrRefuse {
  margin-right: 10px;
}
.page_content {
  text-align: center;
}
.page_content .imgCont {
  margin: 20px 0 0;
  width: 250px;
  height: auto;
}
.page_content .img_text {
  font-size: 14px;
  font-weight: bold;
}
.page_content .result {
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 60px;
  font-size: 20px;
  color: #06469e;
}
.page_content .result img {
  vertical-align: middle;
  margin: 0 10px;
}
.page_content .r1 {
  font-size: 18px;
}
.el-steps >>> .el-step__head.is-finish {
  color: #06469e;
  border-color: #06469e;
}
.el-steps >>> .el-step__title.is-finish {
  color: #06469e;
}
</style>
